<!DOCTYPE html>
<html class="x-admin-sm">
<head>
    {include file="public/static" /}

    <style type="text/css">
        [type="checkbox"]:not(:checked), [type="checkbox"]:checked {
            position: static;
            left: -9999px;
            visibility: visible;
        }
    </style>
</head>
<body>

{include file="public/nav" /}

<div class="layui-fluid">
    <div class="layui-row layui-col-space15">
        <div class="layui-col-md12">
            <div class="layui-card">
                <div class="layui-card-header">
                    {eq name="check.Backupexport" value="1"}
                        <a id="export" href="javascript:;" class="layui-btn" autocomplete="off"><i class="layui-icon">&#xe6b2;</i>立即备份</a>
                    {/eq}
                    {eq name="check.Backuprepair" value="1"}
                        <a id="optimize" href="{:url('Backup/optimize')}" class="layui-btn layui-btn-normal"><i class="layui-icon">&#xe639;</i>优化表</a>
                    {/eq}
                    {eq name="check.Backupoptimize" value="1"}
                        <a id="repair" href="{:url('Backup/repair')}" class="layui-btn layui-btn-danger"><i class="layui-icon">&#xe631;</i>修复表</a>
                    {/eq}
                </div>
                <div class="layui-card-body ">
                    <form id="export-form" method="post" action="{:url('Backup/export')}">
                        <table class="layui-table layui-form">
                            <thead>
                                <tr>
                                    <th>
                                        <input class="check-all filled-in" type="checkbox" lay-filter="checkbox" name="id" value="" lay-skin="primary">
                                    </th>
                                    <th>表名</th>
                                    <th>数据量</th>
                                    <th>数据大小</th>
                                    <th>创建时间</th>
                                    <th>备份状态</th>
                                </tr>
                            </thead>
                            <tbody>
                                {volist name="info" id="table"}
                                    <tr>
                                        <td>
                                            <input class="ids" type="checkbox" name="tables[]" value="{$table.name}" lay-skin="primary">
                                        </td>
                                        <td>{$table.name}</td>
                                        <td>{$table.rows}</td>
                                        <td>{$table.data_length|formatBytes}</td>
                                        <td>{$table.create_time}</td>
                                        <td class="info">未备份</td>
                                    </tr>
                                {/volist}
                            </tbody>
                        </table>
                    </form>
                </div>
            </div>
        </div>
    </div>
</div>
</body>
<script>
    /*全选*/
    common.selectCheckbox('checkbox','tables[]');

    layui.use(['jquery','layer'],function(){
        window.$ = layui.$;
        var layer = layui.layer;
        //备份表方法
        $("#export").click(function(){
            var that = this
            //获取备份表数据
            var tables = common.getCheckboxVal()
            if(tables.length < 1){
                layer.msg("请选择需要备份的数据表", {icon:5, time:1500})
                return false
            }
            layer.confirm('确定开始备份数据吗？',function(index) {
                $(".info").html("未备份")
                layer.close(index)
                //改变按钮样式
                $(that).css("pointer-events","none").html("正在发送备份请求");
                //初始化表
                $.post($("#export-form").attr("action"), $("#export-form").serialize(), function (data) {
                    if(data.status == 1){
                        $("#export").html("开始备份，请不要关闭本页面！");
                        backup(data.tab);
                        window.onbeforeunload = function () {
                            return "正在备份数据库，请不要关闭！"
                        }
                    }else{
                        layer.msg(data.info, {icon:5, time:1500})
                        $("#export").html("<i class=\"layui-icon\">&#xe6b2;</i>立即备份");
                    }
                }, "json");
            })
            return false;
        });
        //递归备份表
        function backup(tab, status){
            status && showmsg(tab.id, "开始备份...(0%)");
            $.get( $("#export-form").attr("action"), tab, function(data){
                if(data.status == 1){
                    showmsg(tab, data.info);
                    if(!$.isPlainObject(data.tab)){
                        $("#export").html("<i class=\"layui-icon\">&#xe6b2;</i>立即备份").css("pointer-events","");
                        window.onbeforeunload = function(){
                            return null
                        };
                        return;
                    }
                    //再次执行
                    backup(data.tab, data.tab.id);
                } else {
                    $("#export").html("<i class=\"layui-icon\">&#xe6b2;</i>立即备份");
                }
            }, "json");
        }
        //修改备份状态
        function showmsg(tab, msg){
            var checked_id = 0;
            $(".ids").each(function(index){
                if ($(this).prop("checked")) {
                    if (tab.id == checked_id) {
                        $(this).parent().parent().find(".info").html("<span style='color: #009688'>"+msg+"</span>");
                    }
                    checked_id += 1;
                }
            });
        }
        //优化表
        $("#optimize").click(function(){
            var that = this
            //获取备份表数据
            var tables = common.getCheckboxVal()
            if(tables.length < 1){
                layer.msg("请选择需要优化的数据表", {icon:5, time:1500})
                return false
            }
            layer.confirm('确定优化数据表吗？',function(index) {
                layer.close(index)
                var load = layer.load()
                $.post(that.href, $("#export-form").serialize(), function (data) {
                    if(data.status == 1){
                        layer.msg(data.info, {icon:6, time:1500})
                    }else{
                        layer.msg(data.info, {icon:5, time:1500})
                    }
                    layer.close(load)
                }, "json");
            })
            return false;
        });
        //修复表
        $("#repair").on("click",function(e){
            var that = this
            //获取备份表数据
            var tables = common.getCheckboxVal()
            if(tables.length < 1){
                layer.msg("请选择需要修复的数据表", {icon:5, time:1500})
                return false
            }
            layer.confirm('确定修复数据表吗？',function(index) {
                layer.close(index)
                var load = layer.load()
                $.post(that.href, $("#export-form").serialize(), function (data) {
                    if(data.status == 1){
                        layer.msg(data.info, {icon:6, time:1500})
                    }else{
                        layer.msg(data.info, {icon:5, time:1500})
                    }
                    layer.close(load)
                }, "json");
            })
            return false;
        });
    });
</script>
</html>